<template>
    <div class="all_department">
        <div class="shang">
            <div class="left">
                <div>部门列表</div>
            </div>
            <div class="right">
                 <el-button type="success" @click="add_department">新增部门</el-button>
                  <el-button type="danger">批量删除</el-button>
            </div>
        </div>
        <div class="zhong">
            <div style="height: 1px; width: 100%; background-color: black;"></div>
        </div>
        <div class="xia">
            <el-table :data="department_table" 
            stripe style="width: 100%" 
            default-expard-all
            row-key="id"
            :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
                <el-table-column prop="name" label="部门名称"  />
                <el-table-column prop="dept_sort" label="排序号" width="180" />
                <el-table-column prop="enabled" label="状态"  />
                <el-table-column prop="create_time" label="创建时间"  />
                <el-table-column  label="操作" >
                    <template #default="scope">
                        <el-button @click="edit_dept(scope.row)" type="success" :icon="Edit" circle />
                        <el-button @click="delete_dept(scope.row)" type="danger" :icon="Delete" circle />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="chouti">
            <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                <span>新增部门</span>
                <div class="mycard">
                    <el-card class="box-card">
                        <div class="shuru">
                            <div>部门名称：</div>
                            <el-input v-model="department_shuju.name" placeholder="请输入部门名称" style="margin-left: 20px;"/>
                            <div>部门序号：</div>
                            <el-input v-model="department_shuju.dept_sort" placeholder="请输入部门序号" style="margin-left: 20px;"/>
                        </div>
                        <div class="xuanze">
                            <div>状态：</div>
                            <el-radio-group v-model="department_shuju.enabled" size="large" style="margin-left: 20px;">
                                <el-radio-button label="禁用" />
                                <el-radio-button label="正常" />
                            </el-radio-group>
                            <div>是否顶级部门：</div>
                            <el-radio-group v-model="department_shuju.is_top" size="large" style="margin-left: 20px;">
                                <el-radio-button label="是" />
                                <el-radio-button label="否" />
                            </el-radio-group>
                        </div>
                        <div class="is_show" v-show="department_shuju.is_top == '否'">
                            <div>请选择顶级部门</div>
                            <el-select
                            v-model="top_department"
                            class="m-2"
                            placeholder="请选择"
                            size="large"
                            style="width: 240px">
                                <el-option
                                v-for="item in department_table"
                                :key="item.name"
                                :label="item.name"
                                :value="item.id"/>
                            </el-select>
                        </div>
                        <div style="height: 1px; width: 100%; background: black;"></div>
                        <div class="anniu">
                            <el-button>取消</el-button>
                            <el-button type="success" @click="queren_edit_bumen">确认</el-button>
                        </div>
                    </el-card>
                </div>
            </el-drawer>
        </div>
        <div class="duihuakuang">
            <el-dialog
                v-model="dialogVisible"
                title="编辑部门"
                width="30%"
                :before-close="handleClose"
                >
                <template #footer>
                        <el-input class="shuru" v-model="edit_shuju.name" placeholder="部门名称" />
                        <el-input class="shuru" v-model="edit_shuju.dept_sort" placeholder="部门序号" />
                            <el-radio-group class="shuru" v-model="edit_shuju.enabled" size="large">
                                <el-radio-button label="正常" />
                                <el-radio-button label="禁用" />
                            </el-radio-group>
                        <el-button @click="dianjiquxiao">取消</el-button>
                        <el-button type="primary" @click="dianjiqueren">
                        确定修改
                        </el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup name="department">
import {ref} from 'vue'
import {Dept_list,add_new_department,get_one_department,edit_one_department,delete_department} from '@/apis/department';
import { Edit, Delete } from '@element-plus/icons-vue'

const drawer = ref(false)
const department_shuju = ref({
    name:'',
    dept_sort:'',
    enabled: '正常',
    is_top: '是',
    sub_count: 0,
    pid_id: ''
})

const old_id = ref()
const edit_shuju = ref({
    name:'',
    dept_sort:'',
    enabled: '正常'
})
const dialogVisible = ref(false)
const department_table = ref([])
const top_department = ref('')
const get_department_list = async() => {
    let res = await Dept_list()
    console.log("部门列表", res.result)
    department_table.value = res.result
}

const add_department = () => {
    drawer.value = true
}

const dianjiquxiao = () => {
    dialogVisible.value = false
}
const dianjiqueren = async() => {
    dialogVisible.value = false
    if(edit_shuju.value.enabled == "正常"){
        edit_shuju.value.enabled = true
    }else{
        edit_shuju.value.enabled = false
    }
    await edit_one_department(old_id.value,edit_shuju.value)
    get_department_list()
}

const edit_dept = async(data) => {
    dialogVisible.value = true
    let res = await get_one_department(data.id)
    old_id.value = data.id
    edit_shuju.value.name = res.result.name
    edit_shuju.value.dept_sort = res.result.dept_sort
    if(res.result.enabled == false){
        edit_shuju.value.enabled = "禁用"
    }else{
        edit_shuju.value.enabled = "正常"
    }
    
    console.log("res:::",res)
}
const handleClose = () => {
    edit_shuju.value.name = ""
    edit_shuju.value.dept_sort = ""
    edit_shuju.value.enabled == "正常"

}

const delete_dept = async(ids) => {
    
    let is_ids = []
    is_ids.push(ids.id)
    console.log("ids", is_ids)
    await delete_department(is_ids)
    get_department_list()
}

const queren_edit_bumen = async() => {
    if(top_department.value == '' || top_department.value == 0){
        top_department.value = null
    }
    if(top_department.value == null){
        department_shuju.value.pid_id = top_department.value
    }else{
        department_shuju.value.pid_id = Number(top_department.value)
    }
    
    department_shuju.value.dept_sort = Number(department_shuju.value.dept_sort)
    if(department_shuju.value.enabled == '正常'){
        department_shuju.value.enabled = true
    }else{
        department_shuju.value.enabled = false
    }
    delete department_shuju.value['is_top']
    console.log("要发送的数据",department_shuju.value)
    await add_new_department(department_shuju.value)
    get_department_list()
    drawer.value = false
    department_shuju.value = {
        name: '',
        dept_sort: '',
        enabled: '正常',
        is_top: '是',
        pid_id: ''
    }
    top_department.value = null
}

get_department_list()
</script>





<style lang="scss" scoped>
.all_department{
    .shang{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
            padding-left: 20px;
            font-size: large;
        }
        .right{
            margin-right: 30px;
        }
    }
    .zhong{
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .chouti{
        height: 100%;
        .mycard{
            :deep(.el-card__body){
                height: 90vh;
            }
            .box-card{
                display: flex;
                flex-direction: column;
                margin-top: 10px;
                .shuru{
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
     

                }
                .xuanze{
                    padding-top: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    padding-bottom: 20px;
                }
                .is_show{
                    padding-bottom: 20px;
                }
                .anniu{
                    display: flex;
                    padding-top: 30px;
                    padding-left: 30px;

                }
            }
        }
    }
    .duihuakuang{
        height: 100%;
        .shuru{
            height: 6vh;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
        }
    }
}
</style>